<template>
  <div class="address_book">
    <Header
      title="通讯录"
      btn_icon="user-plus"
    />
    <div class="container">
      <!-- 搜索框 -->
      <div class="rearch_wrap">
        <div class="sear_content">
          <i class="fa fa-search"></i>
          <input
            type="text"
            placeholder="搜索"
            v-model="search_value"
          >
        </div>
      </div>
      <!-- 通讯列表 -->
      <div class="content_wrap">
        <UserCell
          v-for="friend in firendsList"
          :key="friend._id"
          :user="friend"
          @click="cellClick(friend)"
        />
      </div>
      <!-- 多少位联系人 -->
      <div class="count_wrap">
        <span>{{firendsList.length}}位联系人</span>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "./../components/Header";
import UserCell from "./../components/UserCell";
export default {
  components: { Header, UserCell },
  data() {
    return {
      firendsList: [],
      allFirends:[],
      search_value: ""
    };
  },
  created() {
    this.getFriendList();
  },
  methods: {
    getFriendList() {
      //获取通讯录列表
      this.$axios.get("/api/users/all").then(res => {
        this.firendsList = res.data;
        // 做为筛选框里的内容
        this.allFirends = res.data;
      });
    },
    cellClick(friend) {
      this.$router.push('/information')
      // 存入用户信息在vuex
      this.$store.dispatch('setTargetUser',friend)
      // this.$router.push({name:'information',params:{friends:friend}})
    },
    filterData(){//用于监听用户的搜索框内容,进行过滤
      this.firendsList = this.allFirends.filter(friend =>{
        // 把没有搜出来的名字过滤掉
        return friend.name.indexOf(this.search_value) != -1;
      })
    },
    
  },
  mounted(){

  },
  watch:{
    search_value(){
      this.filterData();
    }
  }
};
</script>
<style scoped>
.address_book {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container {
  width: 100%;
  height: calc(100% - 110px);
  margin-top: 50px;
  overflow-y: scroll;
}
.rearch_wrap {
  padding: 5px 0px;
  background-color: #d9d9d9;
}
.sear_content {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-left: 10px;
}
.sear_content i {
  color: #888;
  margin-right: 10px;
}
.sear_content input {
  height: 36px;
  width: 90%;
  outline: none;
  border: none;
  font-size: 14px;
}
.count_wrap{
  min-height: 50px;
  background-color: #fff;
  box-sizing: border-box;
  color: #888;
  font-size: 16px;
  width: 100%;
  line-height: 50px;
  text-align: center;
}
</style>


